<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-12 10:45:47
 * @LastEditors: your name
 * @LastEditTime: 2021-09-24 14:22:15
 * @Description: file content
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="680px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ "确认发布" }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <el-form class="pl30 pr30" :model="formData" ref="form">
      <el-form-item v-if="options.command === 'by-script'">
        <div>确认要发布新版本吗？</div>
      </el-form-item>

      <el-form-item v-if="options.command === 'by-publish'">
        <!-- <div>确认要基于 {{ options.version }} 发布新版本吗？</div> -->
        确认要基于
        <el-select
          class="mr10 ml10"
          style="width: 100px"
          v-model="options.verId"
          placeholder="请选择版本"
        >
          <el-option
            v-for="ver in options.verList"
            :key="ver.id"
            :value="ver.id"
            :label="ver.version | version"
          >
          </el-option>
        </el-select>
        发布新版本吗？
      </el-form-item>

      <el-form-item
        v-if="options.command === 'by-multi-version'"
        prop="entityModelIds"
        :rules="[{ validator: entityModelIdsValidator, trigger: 'change' }]"
      >
        <div class="fields-transfer">
          <div class="fields-transfer_list">
            <div class="fields-transfer_title">
              <span>待选字段</span>
              <el-select
                style="width: 100px"
                v-model="curVer"
                placeholder="请选择版本"
                @change="handleCurVerChange"
              >
                <el-option
                  v-for="ver in options.verList"
                  :key="ver.id"
                  :value="ver.id"
                  :label="ver.version | version"
                >
                </el-option>
              </el-select>
            </div>

            <div class="fields-transfer_ul">
              <div
                class="fields-transfer_li"
                v-for="field in validFields"
                :key="field.id"
              >
                <el-checkbox
                  :checked="leftCheckedData.some((ele) => ele.id === field.id)"
                  @change="handleLeftCheck($event, field)"
                >
                  <span :title="[field.code, field.name] | codeName">
                    {{ [field.code, field.name] | codeName }}
                  </span>
                </el-checkbox>
              </div>
            </div>
          </div>

          <div class="fields-transfer_btns">
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              @click="handleToLeftBtnClick"
              :disabled="rightCheckedData.length === 0"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-arrow-right"
              @click="handleToRightBtnClick"
              :disabled="leftCheckedData.length === 0"
            ></el-button>
          </div>

          <div class="fields-transfer_list">
            <div class="fields-transfer_title">
              <span>已选字段</span>
            </div>
            <div class="fields-transfer_ul">
              <div
                class="fields-transfer_li"
                v-for="field in selectFields"
                :key="field.id"
              >
                <el-checkbox @change="handleRightCheck($event, field)">
                  <span :title="[field.code, field.name] | codeName">
                    {{ [field.code, field.name] | codeName }}
                  </span>
                </el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item
        prop="remark"
        :rules="[
          { required: true, message: '版本描述不能为空', trigger: 'change' },
        ]"
      >
        <el-input
          type="textarea"
          v-model="formData.remark"
          style="width: 100%"
          :rows="5"
          placeholder="请输入版本描述"
          :maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submit(false)">确定</el-button>
      <el-button type="primary" :loading="loading" @click="submit(true)">确认并激活</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getHmpublishedentitymodelList } from "@/apis/paas/HmPublishedEntityModelController.js";

export default {
  name: "PublishForm",
  data() {
    return {
      loading: false,
      showVisible: false,
      options: {},
      formData: {},
      callback: null,
      curVer: "",
      verFields: [],
      selectFields: [],
      leftCheckedData: [],
      rightCheckedData: [],
    };
  },

  computed: {
    validFields() {
      return this.verFields.filter(
        (f) => this.selectFields.findIndex((ff) => ff.id === f.id) < 0
      );
    },
  },

  watch:{
    showVisible(value){
      if(value === false){
        this.loading = false
      }
    }
  },

  methods: {
    open(options = {}, callback) {
      this.options = { ...options };
      this.callback = callback;
      this.verFields = [];
      if (
        options.command === "by-multi-version" &&
        options.verList &&
        options.verList.length > 0
      ) {
        this.curVer = options.verList[0].id;
        this.handleCurVerChange(this.curVer);
      }

      this.selectFields = [];
      this.leftCheckedData = [];
      this.rightCheckedData = [];

      this.formData = {};
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });

      this.showVisible = true;
    },

    close() {
      this.showVisible = false;
    },

    entityModelIdsValidator(rule, value, callback) {
      if (this.selectFields.length === 0) {
        callback(new Error("请选择字段"));
      } else {
        callback();
      }
    },

    handleCurVerChange(publishId) {
      getHmpublishedentitymodelList({
        publishId,
      }).then((res) => {
        //  实体模型过滤系统字段
        this.verFields = res || [];
        // 过滤系统字段
        this.verFields = res.filter((field) => field.builtIn !== true);

        this.verFields.map((field) => {
          return {
            ...field,
            key: field.id,
            label: `${field.code}-${field.name}`,
          };
        });
      });
    },

    handleLeftCheck(checked, field) {
      if (checked) {
        this.leftCheckedData.push(field);
      } else {
        this.leftCheckedData = this.leftCheckedData.filter(
          (ele) => ele.id !== field.id
        );
      }
    },

    handleRightCheck(checked, field) {
      if (checked) {
        this.rightCheckedData.push(field);
      } else {
        this.rightCheckedData = this.rightCheckedData.filter(
          (ele) => ele.id !== field.id
        );
      }
    },

    handleToLeftBtnClick() {
      this.selectFields = this.selectFields.filter(
        (f) => this.rightCheckedData.findIndex((ff) => ff.id === f.id) < 0
      );
      this.rightCheckedData = [];
    },

    handleToRightBtnClick() {
      this.selectFields = this.selectFields.concat(this.leftCheckedData);
      this.leftCheckedData = [];
    },

    async submit(activated = false) {
      this.loading = true
      try {
        await this.$refs.form.validate();
        const { remark } = this.formData;
        const data = {
          activated,
          remark,
        };

        if (this.options.command === "by-multi-version") {
          data.entityModelIds = this.selectFields.map((item) => item.id);
        } else if (this.options.command === "by-publish") {
          data.publishId = this.options.verId;
        }

        this.callback && this.callback(data);
      } catch (error) {
        console.log(error);
        this.loading = false
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .fields-transfer ::v-deep  .el-transfer-panel__item.is-disabled{
//   display: none !important;
// }

.fields-transfer {
  height: 25vh;
  display: flex;

  &_list {
    border: 1px solid #ddd;
    border-radius: 3px;
    height: 100%;
    width: 100px;
    flex: 1;
  }

  &_title {
    background: #f5f7fa;
    height: 40px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }

  &_ul {
    padding: 5px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - 51px);
  }

  &_li .el-checkbox {
    display: flex;
    align-items: center;
    height: 24px;

    ::v-deep .el-checkbox__label {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;

    .el-button {
      margin: 0;
    }
    .el-button:nth-child(n + 1) {
      margin-top: 10px;
    }
  }

  ::v-deep .el-select .el-input__inner {
    border-color: #dcdfe6 !important;
  }
}
</style>
